<template>
  <div class="function-container">
    <h1 class="page-title">功能中心</h1>
    
    <div class="function-list">
      <div 
        v-for="item in functionList" 
        :key="item.id" 
        class="function-item"
        @click="navigateTo(item.path)"
      >
        <div class="function-icon">
          <img :src="item.icon" :alt="item.name">
        </div>
        <div class="function-content">
          <h3 class="function-name">{{ item.name }}</h3>
          <p class="function-desc">{{ item.description }}</p>
        </div>
        <div class="function-arrow">
          <i class="arrow-icon">→</i>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 功能列表数据
const functionList = ref([
  {
    id: 1,
    name: '教学设计生成',
    description: '输入课程名称、教学目标等，一键生成完整方案',
    icon: '/src/assets/icons/design.svg',
    path: '/design'
  },
  {
    id: 2,
    name: '多媒体资源生成',
    description: '生成教学所需的图像和视频资源，支持多种风格',
    icon: '/src/assets/icons/media.svg',
    path: '/media'
  },
  {
    id: 3,
    name: '练习题生成',
    description: '根据知识点生成多种类型的练习题，支持难度调整',
    icon: '/src/assets/icons/exercise.svg',
    path: '/exercise'
  },
  {
    id: 4,
    name: '试卷生成',
    description: '一键生成标准化试卷及答案，支持知识点覆盖率检查',
    icon: '/src/assets/icons/paper.svg',
    path: '/paper'
  },
  {
    id: 5,
    name: '个性化定制',
    description: '基于学情数据的个性化教学资源推荐',
    icon: '/src/assets/icons/custom.svg',
    path: '/custom'
  },
  {
    id: 6,
    name: '反馈优化',
    description: '提交反馈，持续优化生成效果',
    icon: '/src/assets/icons/feedback.svg',
    path: '/feedback'
  }
])

// 导航到指定页面
const navigateTo = (path) => {
  router.push(path)
}
</script>

<style scoped>
.function-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.page-title {
  font-size: 1.8rem;
  margin-bottom: 24px;
  color: #333;
  font-weight: 600;
}

.function-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.function-item {
  display: flex;
  align-items: center;
  background-color: white;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: all 0.3s ease;
}

.function-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.function-icon {
  width: 50px;
  height: 50px;
  background-color: #f0f5ff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  flex-shrink: 0;
}

.function-icon img {
  width: 28px;
  height: 28px;
}

.function-content {
  flex: 1;
}

.function-name {
  font-size: 1.1rem;
  font-weight: 500;
  margin: 0 0 8px 0;
  color: #333;
}

.function-desc {
  font-size: 0.9rem;
  color: #666;
  margin: 0;
  line-height: 1.4;
}

.function-arrow {
  margin-left: 16px;
  color: #999;
  font-size: 1.2rem;
  transition: transform 0.2s;
}

.function-item:hover .function-arrow {
  transform: translateX(5px);
  color: #4b6cb7;
}

/* 响应式调整 */
@media (max-width: 480px) {
  .function-item {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .function-icon {
    margin-right: 0;
    margin-bottom: 12px;
  }
  
  .function-arrow {
    display: none;
  }
}
</style>